<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
        a {
			text-decoration: none;
		}
		body {
			height: 5000px;
		}
		.box1 {
			position: relative;
			width: 700px;
			height: 200px;
			margin: 20px auto;
			background-color: blue;
			font-size: 20px;
			font-weight: 700;
		}
		.box1 img {
			width: 100%;
			height: 100%;
		}
		.box1 .pre {
			position: absolute;
			top: 100px;
			left: 0;
			width: 40px;
			height: 40px;
			color: white;
			background-color: rgba(0,0,0,.3);
			border-radius: 0 20px 20px 0;
		}
		.box1 .next {
			position: absolute;
			top: 100px;
			right: 0;
			width: 40px;
			height: 40px;
			color: white;
			background-color: rgba(0,0,0,.3);
			border-radius: 20px 0 0 20px;
		}
		.box1 .pre  span{
			font-size: 20px;			
			font-weight: 700;
			line-height: 40px;
			margin-left: 8px;
		}
		.box1 .next  span{
			font-size: 20px;			
			font-weight: 700;
			line-height: 40px;
			margin-left: 15px;
		}
		.box1 .pre:hover,
		.box1 .next:hover{
			color: red;
		}
		.fix {
			position: fixed;
			bottom: 0;
			right: 200px;
			width: 100px;
			height: 100px;
			background-color: #00A4FF;
		}
		
		.banner {
			position: sticky;
			top: 0px;
			z-index: 1;
			margin: 100px auto 0;
			width: 800px;
			height: 50px;
			background-color: #8A2BE2;
		}
		.box1 ul{
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -75px;
			width: 150px;
			height: 30px;
			border-radius: 15px;
			background-color: rgba(0,0,0,0.5);
		}
		.box1 ul li {
			float: left;
			list-style: none;
            margin-top: 7px;
			margin-left: 17px;
		}
		.box1 ul li a {
			display: block;
			width: 16px;
			height: 16px;
			line-height: 30px;
			border-radius: 8px;
			background-color: white;
		}
		.box1 ul li a:hover {
			background-color: red;
		}
	</style>
	<body>
		<div id="top"></div>
		<div class="banner"></div>
		<div class="box1">
			<img src="img/banner.png" >
			<a href="#" class="pre">
			   <span>&lt;</span>
			</a>
			<a href="#" class="next">
			   <span>&gt;</span>
			</a>
			
			<ul>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
			<a href="#top" class="fix">
				返回顶部
			</a>
		</div>
		
	</body>
</html>
